<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <img
          src="../../assets/images/01_11.png"
          alt
          class="img_zuo"
          @click="back"
        />
        <div>{{ jiedao }}</div>
        <!-- <img
          src="../../assets/images/big.png"
          alt
          class="img_you"
          @click="search"
        /> -->
      </div>
    </header>
  
    <!-- 列表 -->
    <div class="liebiao">
       <van-list v-model="loading" :finished="finished" @load="onLoad">
     <div
        class="liebiao_main"
        :class="isbg(v)"
        v-for="(v, index) of list"
        :keys="index" @click="liebiao(v)"
      >
        <div class="liebiao_title">
    <div class="img">
              <img
                src="../../assets/images/img/yl.png"
                alt=""
                v-if="v.states == 4"
              />
              <img
                src="../../assets/images/img/wei.png"
                alt=""
                v-if="v.states == 1"
              />
              <img
                src="../../assets/images/img/yc.png"
                alt=""
                v-if="v.states == 2"
              />
              <img
                src="../../assets/images/img/cqls.png"
                alt=""
                v-if="v.states == 3"
              />
            </div>
         
         <div class="liebiao_titletext">
            {{ v.title|handleText }}
          </div>
        </div>

        <div class="liebiao_detail">
            <div class="liebiao_time">
            <div>[{{ v.serialNumber }}]</div>
            <div>{{ v.endTime }}</div>
          </div>
         
          <div class="liebiao_detailmain">
            {{ v.workMeasures|header }}
          </div>
        </div>
      </div>
       </van-list>
    </div>
        <Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from "../tabbar.vue";
export default {
       components: {
    Tabbar
  },
   filters: {
     handleText(value) {
      
      if (!value) return ''
      if (value.length > 28) {
        return value.slice(0, 28) + '...'
      }
      return value
     },
      header(value) {
      
      if (!value) return ''
      if (value.length > 55) {
        return value.slice(0, 55) + '...'
      }
      return value
     }
   },
  data() {
    return {
      dwid: "",
      list: [],
      yl: "",
      wei: "",
      cq: "",
      jiedao: "",
      counts: "",
      count: 1,
       loading: false,
      refreshing: false, //是否下拉加载 是true
     
      finished: false,
    };
  },
    beforeRouteLeave(to, from, next) {
    //设置路由的 meta
    console.log(to);
    if (!(to.path == "/snxd_list")) {
    }
    next();
  },
   beforeRouteEnter(to, from, next) {
    next((vm) => {
        vm.jiedao=localStorage.getItem("diqu")
      if (from.path == "/snxd_list") {
        console.log(from.path);
        console.log(vm.list)
        // vm.jiazailist();

        if(vm.list.length>0){
          sessionStorage.setItem("sxs", 1);
        }
      }else if(from.path == "/snxd_search"){
        //  if(vm.list.length>0){
        //   sessionStorage.setItem("oppo", 1);
        // }
        vm.jiazai();
      } else if (from.path == "/snxd_detail") {
        // console.log("detail");
        sessionStorage.setItem("sxs", 2);
      }
      var dd = sessionStorage.getItem("sxs");
      console.log(dd, "dgs78g");
      if (dd == 1) {
        console.log("走第一步");
        vm.onRefresh();
      } else if (dd == 2) {
        vm.scrollTop();
        console.log("走第二步");
      }
      //
    });
  },
  methods: {
     isbg(v) {
      var zt = "";
      if (v.states == 1) {
        zt = "bg0";
      } else if (v.states == 2) {
        zt = "bg1";
      } else if (v.states == 3) {
        zt = "bg2";
      } else if (v.states == 4) {
        zt = "bg3";
      }
      return zt;
    },

    back() {
        this.$router.back()
     
// localStorage.removeItem("snxd_dwid")
      
    },
        onRefresh() {
      // 清空列表数据

      this.finished = false;

      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.list = [];
      this.refreshing = false;
      this.count = 1;
      this.onLoad();
    },
      scrollTop() {
      var list_scrollTop = localStorage.getItem("list_scrollTopss")
        ? JSON.parse(localStorage.getItem("list_scrollTopss"))
        : null;
      if (list_scrollTop || list_scrollTop === 0) {
        $(".liebiao").animate(
          {
            scrollTop: list_scrollTop,
          },
          0
        );
      }
    },
    // search() {
    //   this.$router.push("snxd_search");
    // },
    liebiao(v){
      console.log("点击事件",v)
       localStorage.setItem("list_scrollTopss", $(".liebiao").scrollTop());
      localStorage.setItem('liebiaoid',v.id)
        this.$router.push("snxd_detail");
        var snxdlu={
          snxdlj:'/snxd_sclist'
        }
        localStorage.setItem('snxdlu',JSON.stringify(snxdlu))
    },
    jiazai() {
      var search=localStorage.getItem("searchs")? JSON.parse(localStorage.getItem("searchs"))
        : {};
      console.log(search.dwId)
      if(search.dwId==""||search.dwId==null){
          search.dwId=localStorage.getItem("snxd_dwid")
           this.axios
        .get(
          `${this.$global_msg.Url.host}//ThreeYearsController/selectWorkableUnitId?dwId=${search.dwId}&configId=${search.configId}&state=${search.state}&beginTime=${search.beginTime}&endTime=${search.endTime}&name=${search.name}`
        )
        .then((res) => {
           console.log("这是从search界面进入",res)
            if(res.data.code==200){
              if(res.data.rows.mapList.length>0){
   this.list = res.data.rows.mapList;
                // 街道
            this.jiedao = res.data.rows.mapOne[0].jc;
              }else if(res.data.rows.mapList.length==0){
                  this.$toast("暂无数据!");
              }
             
            }
        })
      }else{
 this.axios
        .get(
          `${this.$global_msg.Url.host}//ThreeYearsController/selectWorkableUnitId?dwId=${search.dwId}&configId=${search.configId}&state=${search.state}&beginTime=${search.beginTime}&endTime=${search.endTime}&name=${search.name}`
        )
        .then((res) => {
            if(res.data.code==200){
              if(res.data.rows.mapList.length>0){
   this.list = res.data.rows.mapList;
                // 街道
            this.jiedao = res.data.rows.mapOne[0].jc;
              }else if(res.data.rows.mapList.length==0){
                  this.$toast("暂无数据!");
              }
             
            }
        })
      }
      
  },
  // 
   jiazailist() {
      var quanxian = localStorage.getItem("quanxian");
      
      if (
        quanxian == 0 ||
        quanxian == "0" ||
        quanxian == 1 ||
        quanxian == "1"
      ) {
        this.dwid = localStorage.getItem("snxd_dwid");
      } else if (
        quanxian == 2 ||
        quanxian == "2" ||
        quanxian == 6 ||
        quanxian == "6"
      ) {
        this.dwid = localStorage.getItem("fid");
      } else if (quanxian == 3 || quanxian == "3") {
        var keshiid = localStorage.getItem("keshishuzi");
        if (keshiid == 1) {
          this.dwid = localStorage.getItem("snxd_dwid");
        } else if (keshiid == 100) {
          this.dwid = localStorage.getItem("fid");
        }
      }
       var sx=sessionStorage.getItem("sx")
      // if(years==null){
      this.axios
        .get(
          `${this.$global_msg.Url.host}/ThreeYearsController/selectWorkableUnitId?dwId=${this.dwid}&page=${this.count}&rows=10&state=${sx}`
        )
        .then((res) => {
          // console.log(res);
          // sessionStorage.setItem("oppo", 1);
          if (this.refreshing) {
            this.list = [];
            this.refreshing = false;
            this.count = 1;
          }
          if (res.data.code == 200) {
            console.log("这是从list界面进入",res)
 this.jiedao = res.data.rows.mapOne.jc;
            // this.list = res.data.rows.mapList;
            if (res.data.total == 0) {
              this.finished = true;
              return false;
            }
            for (var i of res.data.rows.mapList) {
              this.list.push(i);
            }
            this.total = res.data.total;
            console.log(this.total, "哈哈哈哈哈哈哈");
            this.count += 1;
            this.loading = false;
            console.log(this.list.length);
            if (
              this.total < this.list.length ||
              this.total == this.list.length
            ) {
              this.finished = true;
              console.log("加载完毕");
            }
          }else if(res.data.code==1){
            //  this.loading = false;
            this.finished = true;
             // 街道
           
          
              this.$toast("暂无数据");
          }
        });
    },
        // 请求列表
    onLoad() {
      this.jiazailist();
    },
  },

  mounted() {
    // this.jiazai();
  },
}

</script>
<style scoped>
#app3 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
}
.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  width: 100%;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
     padding-bottom: 1rem;
}
.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}
.img_you {
  width: 0.529629rem;
  height: 0.529629rem;
}
.main {
  width: 100%;
  background: #f7f7f9;
  padding-top: 0.292593rem;
  padding-bottom: 0.292593rem;
}
.mains {
  width: 100%;
  background: #fff;
  border-top-right-radius: 0.185185rem;
  border-top-left-radius: 0.185185rem;
  border-bottom-right-radius: 0.185185rem;
  border-bottom-left-radius: 0.185185rem;
}
.danwei {
  display: flex;
  justify-content: space-between;
  width: 96%;
  margin: auto;
  border-bottom: 1px solid #ddd;
}
.dwleft {
  display: flex;
}
.dwleft img {
  height: 1.025926rem;
  padding-top: 0.477778rem;
  padding-right: 0.111111rem;
}
.dwleft div {
  line-height: 5;
  font-size: 0.407407rem;
  font-weight: 400;
}
.dwright div {
  line-height: 5;
  font-size: 0.407407rem;
  font-weight: 400;
}
/* 三项 */
.san {
  width: 100%;
  display: flex;
  padding-top: 0.47037rem;
  padding-bottom: 0.47037rem;
  justify-content: space-around;
}
.sanone {
  border-right: 1px solid #ddd;
  width: 33%;
}
.santwo {
  border-right: 1px solid #ddd;
  width: 33%;
}
.santhree {
  width: 33%;
}
.sanonetop {
  display: flex;
  width: 27%;
  margin: auto;
  text-align: center;
}
.sanonenumber1 {
  color: #04ac3f;
  font-weight: 600;
  font-size: 0.555556rem;
}
.sanonenumber2 {
  color: #000000;
  font-weight: 600;
  font-size: 0.555556rem;
}
.sanonenumber3 {
  color: #cc9501;
  font-weight: 600;
  font-size: 0.555556rem;
}
.xiang {
  font-weight: 400;
  font-size: 0.307407rem;
  line-height: 2.5;
  color: #5c5c5c;
}
.sanonebommten {
  color: #5c5c5c;
  font-weight: 400;
  text-align: center;
}
/* 列表 */
.liebiao {
  width: 100%;
  overflow-y: auto;
    padding-bottom: 2rem;
  /* background: #d3fae1; */
}
/* .liebiao:nth-child(1){
   border-top: 1px solid #8c8c8c;
} */
.liebiao_main {
  padding-top: 0.37037rem;
  padding-bottom: 0.37037rem;

  margin: auto;
 width: 90%;
    font-size: 0.12963rem;
    padding-left: 0.2rem;
  border-bottom: 1px solid #8c8c8c;
}
.img{
   width:19%;
}
.img img {
   width:85%;
   
    display: block;
    margin: auto;

}
.liebiao_titletext {
     width: 90%;
       font-size: 0.45963rem;
    padding-left: 0.2rem;
        font-weight: 600;
}
.liebiao_time{
    text-align: center;
    padding-top: 0.15593rem;
    width:19%;
    font-size: 0.3888888888888889rem;
}
.liebiao_title {
 padding-right: 0.185185rem;
    /* width: 3rem; */
    display: flex;
   
}
.liebiao_detailmain {
  overflow: hidden;
  padding-top: 0.17037rem;
  height: 1.51111rem;
    width: 90%;
  padding-left: 0.2rem;
  font-size: 0.37037rem;
  color: #6b6b6b;
}
.liebiao_detail{
  display: flex;
}
.bg2 {
  background: #ffef99;
}

.bg1 {
  background: #ffd28a;
}

.bg0 {
  background: #ffffff;
}

.bg3 {
  background: #d3fae1;
}
</style>